<template>
  <div class="show-area section-bg">
    <div class="show-area__nav-group">
      <div
        @click="hanldeChangeTap(0)"
        :class="{ active: tabIndex === 0 }"
        class="show-area__nav-item"
        id="new-trending-btn"
      >
        New & Trending
      </div>
      <div
        @click="hanldeChangeTap(1)"
        :class="{ active: tabIndex === 1 }"
        class="show-area__nav-item"
        id="top-sellers-btn"
      >
        Top Sellers
      </div>
    </div>

    <div id="show-area-carousel" class="show-area-carousel carousel slide">
      <div class="show-area-carouse__carousel-inner carousel-inner">
        <div
          :key="index"
          v-for="(carouselInfo, index) in carouselList"
          class="show-area-carousel-carousel-item carousel-item"
        >
          <div class="show-area-carousel-item-container d-flex">
            <div class="flex-grow-1">
              <ShowAreaItem
                v-for="(item, index) in carouselInfo.list"
                :key="item + index"
                v-bind="item"
              ></ShowAreaItem>
            </div>
            <ShowAreaInfo v-bind="carouselInfo.info"></ShowAreaInfo>
          </div>
        </div>
        <!-- <div class="carousel-item active">
          <div class="show-area-carousel-item-container d-flex">
            <div class="flex-grow-1">
              <ShowAreaItem v-for="(item, index) in newsTrending.list" :key="item + index" v-bind="item"></ShowAreaItem>
            </div>
            <ShowAreaInfo v-bind="newsTrending.info"></ShowAreaInfo>
          </div>
        </div>
        <div class="carousel-item">
          <div class="show-area-carousel-item-container">
            <ShowAreaItem v-for="(item, index) in topSellers.list" :key="item + index" v-bind="item"></ShowAreaItem>
            <ShowAreaInfo v-bind="newsTrending.info"></ShowAreaInfo>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import ShowAreaItem from './components/ShowAreaItem.vue'
import ShowAreaInfo from './components/ShowAreaInfo.vue'
import { Carousel } from 'bootstrap'

const tabIndex = ref(0)
const carousel = ref(null)

const newsTrending = {
  list: [
    {
      imgSrc: '/test/Character/Character.jpg',
      title: 'Midjourney',
      tagTextList: ['Text to Image Creative'],
      price: '66 DMD'
    },
    {
      imgSrc: '/test/Character/Character.jpg',
      title: 'ChatGPT',
      tagTextList: ['AI Generation', 'Personal Assistance', 'Creative', 'Copywriting'],
      price: '66 DMD'
    },
    {
      imgSrc: '/test/Character/Character.jpg',
      title: 'Character.AI',
      tagTextList: ['AI generation', 'ChatBot', 'Social'],
      price: '66 DMD',
      linePrice: '79 DMD',
      discountText: '-20%'
    },
    {
      imgSrc: '/test/Character/Character.jpg',
      title: 'LANDR',
      tagTextList: ['Music', 'AI generation'],
      price: '66 DMD',
      linePrice: '99 DMD',
      discountText: '-20%'
    }
  ],
  info: {
    title: 'Midjourney',
    score: 8.4,
    mentions: 6386,
    downloads: 9999,
    imgList: ['/img/about-2.jpg', '/img/about-2.jpg', '/img/about-2.jpg']
  }
}

const topSellers = {
  list: [
    {
      imgSrc: '/test/ChatGPT/ChatGPT-product.jpeg',
      title: 'Midjourney',
      tagTextList: ['Text to Image Creative'],
      price: '66 DMD'
    },
    {
      imgSrc: '/test/ChatGPT/ChatGPT-product.jpeg',
      title: 'ChatGPT',
      tagTextList: ['AI Generation', 'Personal Assistance', 'Creative', 'Copywriting'],
      price: '66 DMD'
    },
    {
      imgSrc: '/test/ChatGPT/ChatGPT-product.jpeg',
      title: 'Character.AI',
      tagTextList: ['AI generation', 'ChatBot', 'Social'],
      price: '66 DMD',
      linePrice: '79 DMD',
      discountText: '-20%'
    },
    {
      imgSrc: '/test/ChatGPT/ChatGPT-product.jpeg',
      title: 'LANDR',
      tagTextList: ['Music', 'AI generation'],
      price: '66 DMD',
      linePrice: '99 DMD',
      discountText: '-20%'
    }
  ],
  info: {
    title: 'ChatGpt',
    score: 6.3,
    mentions: 3333,
    downloads: 229,
    imgList: ['/img/about-2.jpg', '/img/about-2.jpg', '/img/about-2.jpg']
  }
}

const carouselList = [newsTrending, topSellers]

onMounted(() => {
  carousel.value = new Carousel('#show-area-carousel', {
    touch: false
  })

  document.querySelector('.show-area-carousel-carousel-item').classList.add('active')
})

function hanldeChangeTap(index) {
  tabIndex.value = index
  carousel.value.to(index)
}
</script>

<style>
.show-area-item + .show-area-item {
  margin-top: 10px;
}
.show-area-carouse__carousel-inner {
  padding: 20px;
  background: #000018;
}
</style>
​
